<template>
	<view class="">
		<view class="home-top-con">
			<mix-search bgColor="#99130C" inputColor="#AD342D" iconColor="#ffffff" placeholder="placeholderw"></mix-search>
		</view>
		<view class="wrap">
			<swiper autoplay circular>
				<swiper-item class="swiperItem" v-for="(item, index) in swiperList" :key="index">
					<view class="swiperItem"  @tap="bannerItemTap(item)">
						<image :src="item.pic" mode="scaleToFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="itemCon row between noticeCon">
			<view class="row between fill" >
				<image src="/static/img/gonggao.png" mode="" class="icon-gonggao"></image>
				<text class="noticeTitle">最新通知：</text>
				<u-notice-bar
					class="fill"
					:volume-icon="false"
					name="title"
					color="#999999"
					:font-size="22"
					mode="vertical"
					:list="noticeList"
					:padding="0"
					bgColor="#fff"
					@click="noticeOnClick"
				></u-notice-bar>
			</view>
			<view class="row between" @tap="navTo('/pages/public/notice')">
				<text class="noticeLine"></text>
				<text class="noticeMore">更多</text>
			</view>
		</view>
		<view class="ad-con">
			<view class="ad-img-con" @tap="navTo('/pages/video/index')"><image :src="videoIcon" mode=""></image></view>
		</view>
		<block v-if="dataXList.length != 0">
			<view class="row" style="padding: 20upx;">
				<text class="tui-title">为你推荐</text>
				<image src="/static/img/remen.png" mode="" class="hote-icon"></image>
			</view>
			<view class="scroll-view-con">
				<scroll-view scroll-x="true" ref="scrollView" class="scrollview" :scroll-left="scrollLeft" @scrolltolower="loadXData" @scroll="scroll">
					<view class="item-scroll" v-for="(item, index) in dataXList" :key="index" @tap="navTo(`/pages/details/goodDetails?id=${item.id}`)">
						<image :src="item.icon" class="item-scroll-img"></image>
						<view class="item-scroll-title clamp" style="padding-top: 20upx;">{{ item.name }}</view>
						<view class="item-scroll-price" style="padding: 20upx 0;">￥{{ item.price }}</view>
						<view class="item-pop row center" v-if="item.goodsStatus != 0">
							<image src="/static/img/yihsouxin.png" mode="aspectFill" class="item-s"></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</block>
		<u-sticky :zIndex="55"><list-page-store @changeStore="changeStore"></list-page-store></u-sticky>
		<view class="" style="margin-top: 20upx;">
			<u-row gutter="20" style="flex-wrap: wrap;">
				<u-col span="6" v-for="(item, index) in dataList" :key="index"><pages-item :item="item"></pages-item></u-col>
			</u-row>
		</view>
		
		<u-back-top icon="/static/img/back-top.png" :scrollTop="scrollTop"></u-back-top>
		<mix-loading v-if="isLoading"></mix-loading>
		<refresh-icon @refresh="initData('refresh')"></refresh-icon>
	</view>
</template>

<script>
import mixSearch from "@/components/mix-search/index.vue";
import listPageStore from "@/components/page-item-list/list-page-store.vue";
import pagesItem from "@/components/page-item-list/page-goos-item.vue";
import refreshIcon from "@/components/page-item-list/refresh-icon.vue";
export default {
	components: {
		mixSearch,
		listPageStore,
		pagesItem,
		refreshIcon
	},
	data() {
		return {
			type: 2, //  排序方式
			scrollTop: 800,
			pageNo: 1,
			totalPage: 1,
			pageXNo: 1,
			totalXPage: 1,
			scrollLeft:0,
			placeholderStyle: {
				color: "#ffffff"
			},
			videoIcon:"",
			noticeList: [],
			dataXList: [],
			dataList: [],
			swiperList:[]
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad(options) {
		if (options.q) {
			const inviteId = decodeURIComponent(options.q).split("?")[1].split("=")[1];
			console.log(inviteId)
			getApp().globalData.inviteId = inviteId;
		}
		if (options.inviteId) {
			getApp().globalData.inviteId = options.inviteId;
		}
		// uni.setStorageSync("uid", "1");
		this.initData();
		uni.$on('upDate',()=>{this.initData(1)});
	},
	onReachBottom() {
		console.log("加载...");
		this.totalPage > this.pageNo ? (this.pageNo++, this.loadData()) : "";
	},
	onShareAppMessage() {
		return {
			path: `/pages/tabs/home?inviteId=${uni.getStorageSync("uid")}`
		}
	},
	methods: {
		scroll(e){
			this.scrollLeft=e.target.scrollLeft;
		},
		initData(type) {
			if(type){
				this.pageNo=1;
				this.pageXNo=1;
				this.scrollLeft=0;
				uni.pageScrollTo({
					scrollTop:0
				})
			}
			this.getIndexNotice();
			this.getIndexSwiper();
			this.getIndexVideo();
			this.loadHomePageXData();
			this.loadData();
		},
		noticeOnClick(index){
			let item=this.noticeList[index];
			getApp().globalData.noticeItem = item;
			this.navTo("/pages/public/noticeDetails");
		},
		async getIndexSwiper() {
			const res = await this.$request("content/banner-home", {});
			if (res.result == 0) {
				this.swiperList = res.data;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getIndexNotice() {
			const data = {
				uid:uni.getStorageSync('uid')
			};
			const res = await this.$request("content/announcement", data);
			if (res.result == 0) {
				this.noticeList = res.data.list;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getIndexVideo() {
			const data = {
				uid:uni.getStorageSync('uid')
			};
			const res = await this.$request("content/video-icon", data);
			if (res.result == 0) {
				this.videoIcon = res.data.icon;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		changeStore(e) {
			console.log(e);
			if (e.current == 0) {
				this.type = 2;
			} else if (e.current == 1) {
				this.type = e.sortType == 0 ? 6 : 5;
			} else if (e.current == 2) {
				this.type = e.sortType == 0 ? 4 : 3;
			} else {
				this.type = 7;
			}
			this.pageNo=1;
			this.loadData();
		},
		loadXData(){
			this.totalXPage>this.pageXNo? (this.pageXNo++, this.loadHomePageXData()) : "";
		},
		async loadHomePageXData() {
			const data = {
				uid: uni.getStorageSync("uid"),
				type: "1",
				pageNo: this.pageXNo,
				pageSize: "10"
			};
			const res = await this.$request("goods/goods-list", data, {showLoading: true});
			if (this.pageXNo == 1) {
				this.dataXList = [];
			}
			if(res.result==0){
				this.dataXList = this.dataXList.concat(res.data.list);
				this.totalXPage = Math.ceil(res.data.count / 10);
			}
			
		},
		async loadData() {
			const data = {
				uid: uni.getStorageSync("uid"),
				type: this.type,
				pageNo: this.pageNo,
				pageSize: "10"
			};
			const res = await this.$request("goods/goods-list", data, {showLoading: true});
			if (this.pageNo == 1) {
				this.dataList = [];
			}
			if(res.result==0){
				this.dataList = this.dataList.concat(res.data.list);
				this.totalPage = Math.ceil(res.data.count / 10);
			}
			
		}
	}
};
</script>

<style scoped lang="scss">
.ad-img-con {
	width: 710upx;
	height: 178upx;
	border-radius: 10upx;
	margin: 20upx auto;
	overflow: hidden;
	image {
		width: 100%;
		height: 100%;
	}
}
.item-scroll-title {
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 36upx;
}
.item-scroll-price {
	font-size: 33upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #cb1414;
	line-height: 36upx;
}
.home-top-con {
	height: 260upx;
	background: #99130c;
	width: 100%;
}
.wrap {
	padding: 0 20upx;
	margin-top: -150upx;
}
.swiperItem {
	border-radius: 20upx;
	overflow: hidden;
	image {
		width: 100%;
		height: 300upx;
	}
}
.noticeCon {
	padding: 20upx;
	height: 100upx;
}
.noticeTitle {
	font-size: 24upx;
	font-weight: 500;
	color: #333333;
	margin-left: 20upx;
	position: relative;
}
.noticeLine {
	width: 2upx;
	height: 15upx;
	background: #c1514b;
	margin: 0 20upx;
}
.noticeInfo {
	font-size: 22upx;
	font-weight: 500;
	color: #999999;
}
.noticeMore {
	font-size: 22upx;
	font-weight: 500;
	color: #c1514b;
}
.icon-gonggao {
	width: 35upx;
	height: 37upx;
}
.tui-title {
	font-size: 32upx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #000000;
}
.hote-icon {
	width: 42upx;
	height: 28upx;
	margin-left: 10upx;
}
.scrollview {
	background: #f6f6f6;
	padding: 20upx;
	white-space: nowrap;
}
.scroll-view-con {
	padding: 20upx;
}
.item-scroll {
	border-radius: 10upx;
	overflow: hidden;
	display: inline-block;
	margin-right: 20upx;
	width: 240upx;
	position: relative;
}
.item-scroll:last-child {
	margin-right: 0;
}
.item-scroll-img {
	width: 240upx;
	height: 200upx;
}
</style>
